import MyIcon from '@/components/MyIcon';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { TypographyTitle } from '@/components/Typography';
import { requestFunCompon } from '@/utils';
import { Descriptions, Drawer, Empty, message, Spin } from 'antd';
import { useCallback, useContext, useEffect, useState } from 'react';
import { useRequest } from 'umi';
import { IUserDetailInfoDraw } from '../type';

import detailStyle from '../styles.less';
import { UserDetailPosCard } from './UserDetailPosCard';
import { UserOtherHandleContext } from '../hooks';
const DesItem = Descriptions.Item;

import imgSrcUser from '../../../../../public/image/manImg.png';

export const UserDetailInfoDraw: React.FC<IUserDetailInfoDraw> = ({
  visible, //是否打开抽屉
  onRowDetail, //选中的行数据
  onCloceDrawer, //关闭抽屉
}) => {
  const { userOthDispatch } = useContext(UserOtherHandleContext);

  // 保存用户信息
  const [userDetailInfo, setUserDetailInfo] = useState<any>(null);
  const userDetailCall = useCallback(
    (infoObj: any) => {
      setUserDetailInfo(infoObj);
    },
    [userDetailInfo],
  );

  useEffect(() => {
    if (visible) {
      getUserDetailInfo?.run(onRowDetail);
    }
    return () => {
      userOthDispatch({
        type: 'remove-allOtherHandle-state',
      });
    };
  }, [onRowDetail?.id, visible]);

  // 获取用户详情
  const getUserDetailInfo = useRequest(
    (checkRow: any) => {
      let url = `/userController/getUserByID/${checkRow?.id}`;
      return requestFunCompon('GET', url);
    },
    {
      manual: true,
      onSuccess: (res: any) => {
        if (res && res?.msgFlag) {
          message?.success(res?.msg);
          userDetailCall(res?.obj);
        } else {
          message.error(res?.msg);
        }
      },
    },
  );

  return (
    <Drawer
      open={visible}
      onClose={onCloceDrawer}
      title={<div>用户详情</div>}
      style={{ position: 'absolute' }}
      placement="right"
      getContainer={false}
      width={700}
      headerStyle={{
        padding: '.5rem',
      }}
      bodyStyle={{
        padding: '10px 5px',
      }}
      closable={false}
      destroyOnClose={true}
    >
      <ScrollBarLayout>
        <div style={{ display: visible ? 'block' : 'none' }}>
          <Spin spinning={getUserDetailInfo?.loading}>
            <div style={{ padding: '0px 10px', width: '685px' }}>
              {userDetailInfo && userDetailInfo?.id ? (
                <>
                  <div style={{ padding: '0px 0px 10px 0px' }}>
                    <TypographyTitle
                      level={4}
                      style={{
                        margin: 0,
                      }}
                    >
                      用户信息
                    </TypographyTitle>
                  </div>
                  <div className={detailStyle['userDetailInfoStyle']}>
                    <div style={{ display: 'flex' }}>
                      <div className={detailStyle['ImgStyle']}>
                        <img src={userDetailInfo?.imageUrl ? userDetailInfo?.imageUrl : imgSrcUser} />
                      </div>
                      <div className={detailStyle['TextStyle']} style={{ flex: 1 }}>
                        <Descriptions bordered={true} size="small" column={4}>
                          <DesItem
                            span={4}
                            label={
                              <span>
                                <MyIcon type="weidenglu-2" />
                                &nbsp;&nbsp;登录名
                              </span>
                            }
                          >
                            <span>{(userDetailInfo && userDetailInfo?.name) || '--'}</span>
                          </DesItem>
                          <DesItem
                            span={4}
                            label={
                              <span>
                                <MyIcon type="waihu2" />
                                &nbsp;&nbsp;手机
                              </span>
                            }
                          >
                            {(userDetailInfo && userDetailInfo?.phoneMobile) || '--'}
                          </DesItem>
                          <DesItem
                            span={4}
                            label={
                              <span>
                                <MyIcon type="gonghao" />
                                &nbsp;&nbsp;工号
                              </span>
                            }
                          >
                            {(userDetailInfo && userDetailInfo?.workNum) || '--'}
                          </DesItem>
                        </Descriptions>
                      </div>
                    </div>
                    <div className={detailStyle['TextStyleCopy']}>
                      <Descriptions bordered={true} size="small" column={4}>
                        <DesItem
                          className={detailStyle['TextStyleCopyContent']}
                          span={2}
                          label={
                            <span>
                              <MyIcon type="lianxiren" />
                              &nbsp;&nbsp;姓名
                            </span>
                          }
                        >
                          <span>{(userDetailInfo && userDetailInfo?.realName) || '--'}</span>
                        </DesItem>

                        <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="ic-normal-zidianguanli" />
                              &nbsp;&nbsp;类型
                            </span>
                          }
                        >
                          <span>{userDetailInfo && userDetailInfo?.userType == 1 ? '应用用户' : '系统用户'}</span>
                        </DesItem>
                        <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type={userDetailInfo?.sex == 1 ? 'icon-man' : userDetailInfo?.sex == 2 ? 'icon-woman' : 'icon-sex'} />
                              &nbsp;&nbsp;性别
                            </span>
                          }
                        >
                          {userDetailInfo && userDetailInfo?.sex == 1 ? '男' : userDetailInfo && userDetailInfo?.sex == 2 ? '女' : '--'}
                        </DesItem>
                        <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="icon-phone1" />
                              &nbsp;&nbsp;电话
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.phoneOffice) || '--'}
                        </DesItem>
                        <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="paixu" />
                              &nbsp;&nbsp;排序
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.seq) || '0'}
                        </DesItem>
                        {/* <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="icon-QQ" />
                              &nbsp;&nbsp;QQ号
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.qqNum) || '--'}
                        </DesItem> */}
                        {/* <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="icon-wechat-fill" />
                              &nbsp;&nbsp;微信号
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.wechatNum) ||
                            '--'}
                        </DesItem> */}
                        <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="youxiang1" />
                              &nbsp;&nbsp;邮箱
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.emailNum) || '--'}
                        </DesItem>
                        {/* <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="chinapost" />
                              &nbsp;&nbsp;邮编
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.zipcode) || '--'}
                        </DesItem> */}
                        {/* <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="zuoji" />
                              &nbsp;&nbsp;是否坐席
                            </span>
                          }
                        >
                          {userDetailInfo && userDetailInfo?.isAgent == 1
                            ? '是'
                            : '否'}
                        </DesItem> */}
                        {/* {
                          userDetailInfo && userDetailInfo?.isAgent == 1 && */}
                        {/* <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="zuoji" />
                              &nbsp;&nbsp;分机号
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.extNum) || '--'}
                        </DesItem> */}
                        {/* // } */}
                        <DesItem
                          span={2}
                          label={
                            <span>
                              <MyIcon type="zhuangtai" />
                              &nbsp;&nbsp;状态
                            </span>
                          }
                        >
                          <span
                            style={{
                              color: userDetailInfo?.isOpen == 1 ? '#52c41a' : '#f00',
                            }}
                          >
                            {userDetailInfo && userDetailInfo?.isOpen == 1 ? '启用' : '禁用' || '--'}
                          </span>
                        </DesItem>
                        {/* <DesItem
                          span={4}
                          label={
                            <span>
                              <MyIcon type="weizhi" />
                              &nbsp;&nbsp;地址
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.address) || '--'}
                        </DesItem> */}
                        <DesItem
                          span={4}
                          label={
                            <span>
                              <MyIcon type="neirongguanli" />
                              &nbsp;&nbsp;备注
                            </span>
                          }
                        >
                          {(userDetailInfo && userDetailInfo?.remark) || '--'}
                        </DesItem>
                      </Descriptions>
                    </div>
                  </div>
                  <UserDetailPosCard posDataList={userDetailInfo?.mpositionList || []} />
                </>
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
            </div>
          </Spin>
        </div>
      </ScrollBarLayout>
    </Drawer>
  );
};
